<!-- 优惠券中心  -->
<template>
	<s-layout :bgStyle="{ color: '#f2f2f2' }" title="优惠券">
		<su-sticky bgColor="#fff">
			<su-tabs
					:current="state.currentTab"
					:list="tabMaps"
					:scrollable="false"
					@change="onTabsChange"
			></su-tabs>
		</su-sticky>
		<s-empty
				v-if="state.pagination.total === 0"
				icon="/static/coupon-empty.png"
				text="暂无优惠券"
		></s-empty>
		<template>
			<view v-for="item in state.pagination.data" :key="item.id">
				<s-coupon-old-list
						:data="item"
						@tap="onSelect(item)"
				></s-coupon-old-list>
			</view>
		</template>

		<uni-load-more
				v-if="state.pagination.total > 0"
				:content-text="{
        contentdown: '上拉加载更多',
      }"
				:status="state.loadStatus"
				@tap="loadmore"
		/>
	</s-layout>
</template>

<script setup>
import sheep from '@/sheep';
import {reactive} from 'vue';
import _, {clone} from "lodash";
import {onLoad, onPullDownRefresh, onReachBottom} from "@dcloudio/uni-app";

const pagination = {
	data: [],
	page: 1,
	total: 0,
	size: 5
};
// 数据
const state = reactive({
	currentTab: 0,
	isAllSelected: false,
	pagination: {
		data: [],
		page: 1,
		total: 0,
		size: 5
	},
	loadStatus: '',
	deleteOrderId: 0,
	error: 0,
});

// 选择优惠券
const onSelect = (addressInfo) => {
	if (addressInfo.status == 1) {
		sheep.$helper.toast('优惠券已使用');
		return;
	}
	uni.$emit('SELECT_COUPON', {
		addressInfo,
	});
	sheep.$router.back();
};

const tabMaps = [
	{
		name: '待使用',
		value: 0,
	},
	{
		name: '已使用',
		value: 1,
	}
];


// 切换选项卡
function onTabsChange(e) {
	if (state.currentTab === e.index) return;

	state.pagination = clone(pagination);
	state.currentTab = e.index;
	state.pagination.data = []
	getList();
}

// 获取订单列表
async function getList() {
	state.loadStatus = 'loading';
	let res = await sheep.$api.order.userCouponList({
		pageNum: state.pagination.page,
		pageSize: state.pagination.size,
		status: tabMaps[state.currentTab].value
	});
	const {rows, total} = res;
	state.pagination.data = _.concat(state.pagination.data, rows);
	state.pagination.total = total
	// 判断是否还有下一页
	if (state.pagination.total <= state.pagination.data.length) {
		state.loadStatus = 'noMore';
	} else {
		state.loadStatus = 'more';
		state.pagination.page++;
	}
}

onLoad(async (options) => {
	getList();
});

// 加载更多
function loadmore() {
	if (state.loadStatus !== 'noMore') {
		state.pagination.page++
		getList();
	}
}

// 上拉加载更多
onReachBottom(() => {
	loadmore();
});

//下拉刷新
onPullDownRefresh(() => {
	state.pagination = clone(pagination);
	getList();
	setTimeout(function () {
		uni.stopPullDownRefresh();
	}, 800);
});

function reloadData() {
	state.pagination = clone(pagination)
	getList()
}

</script>
<style lang="scss" scoped>
.card-btn {
	// width: 144rpx;
	padding: 0 16rpx;
	height: 50rpx;
	border-radius: 40rpx;
	background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
	color: #ffffff;
	font-size: 24rpx;
	font-weight: 400;
}

.border-btn {
	background: linear-gradient(90deg, var(--ui-BG-Main-opacity-4), var(--ui-BG-Main-light));
	color: #fff !important;
}

.disabled-btn {
	background: #cccccc;
	background-color: #cccccc !important;
	color: #fff !important;
}
</style>
